<%--
  Created by IntelliJ IDEA.
  User: zhangDongFei
  Date: 2020/11/30
  Time: 16:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>房间类型经营额</title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

<script>
    layui.use('table', function(){
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: '${pageContext.request.contextPath}/YG/AllTypeAndMoney'
            ,cols: [[
                {field:'name', title: '房间类型', sort: true }
                ,{field:'month1', title: '一月',templet: function (res) {
                        if (res.month1 == null || res.month1 === "") {
                            return "0元";
                        }else {
                            return res.month1;
                        }
                    }}
                ,{field:'month2', title: '二月', sort: true,templet: function (res) {
                        if (res.month2 == null || res.month2 === "") {
                            return "0元";
                        }else {
                            return res.month2;
                        }
                    }}
                ,{field:'month3', title: '三月',templet: function (res) {
                        if (res.month3 == null || res.month3 === "") {
                            return "0元";
                        }else {
                            return res.month3;
                        }
                    }}
                ,{field:'month4', title: '四月',templet: function (res) {
                        if (res.month4 == null || res.month4 === "") {
                            return "0元";
                        }else {
                            return res.month4;
                        }
                    }}
                ,{field:'month5', title: '五月', sort: true,templet: function (res) {
                        if (res.month5 == null || res.month5 === "") {
                            return "0元";
                        }else {
                            return res.month5;
                        }
                    }}
                ,{field:'month6', title: '六月', sort: true,templet: function (res) {
                        if (res.month6 == null || res.month6 === "") {
                            return "0元";
                        }else {
                            return res.month6;
                        }
                    }}
                ,{field:'month7', title: '七月',templet: function (res) {
                        if (res.month7 == null || res.month7 === "") {
                            return "0元";
                        }else {
                            return res.month7;
                        }
                    }}
                ,{field:'month8', title: '八月', sort: true,templet: function (res) {
                        if (res.month8 == null || res.month8 === "") {
                            return "0元";
                        }else {
                            return res.month8;
                        }
                    }}
                ,{field:'month9', title: '九月', sort: true,templet: function (res) {
                        if (res.month9 == null || res.month9 === "") {
                            return "0元";
                        }else {
                            return res.month9;
                        }
                    }}
                ,{field:'month10', title: '十月', sort: true,templet: function (res) {
                        if (res.month10 == null || res.month10 === "") {
                            return "0元";
                        }else {
                            return res.month10;
                        }
                    }}
                ,{field:'month11', title: '十一月', sort: true,templet: function (res) {
                        if (res.month11 == null || res.month11 === "") {
                            return "0元";
                        }else {
                            return res.month11;
                        }
                    }}
                ,{field:'month12', title: '十二月', sort: true,templet: function (res) {
                        if (res.month12 == null || res.month12 === "") {
                            return "0元";
                        }else {
                            return res.month12;
                        }
                    }}
            ]]

        });
    });
</script>
<p onclick="refresh()" class="layui-icon layui-icon-refresh layui-anim layui-anim-scaleSpring"></p>
<div id="main" style="width: 100%;height:500px;"></div>
<script>
    var biaodan=[];
    var biaosuang=[];
    var haoda=[];
    var haosuang=[];
    var haozong=[];
    var monthData =[];
    var  name=[];
    $(function () {
        $.ajax({
            url:'${pageContext.request.contextPath}/YG/queryAllTypeAndMoney',
            type:'post',
            data:{},
            dataType:'JSON',
            async: false,
            success:function (result) {

                monthData = result.monthData;
                biaodan = result.biaodan;
                biaosuang = result.biaosuang;
                haoda = result.haoda;
                haosuang = result.haosuang;
                haozong = result.haozong;
                name = result.name;
                qqqqq();
            }
        })
    })



    function qqqqq() {
        var myChart = echarts.init(document.getElementById('main'));
        var app = [];
        var posList = [
            'left', 'right', 'top', 'bottom',
            'inside',
            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        ];

        app.configParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: echarts.util.reduce(posList, function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };

        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };


        var labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {
                    textBorderColor: '#fff'
                }
            }
        };
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '近一年酒店每个房间类型的经营'
            },
            color: ['#003366', '#006699', '#4cabce', '#e5323e' ,'#2BEC70'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['标准单人房', '标准双人房', '豪华大床房', '豪华双人房','豪华总统套房']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data:monthData
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '标准单人房',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    data: biaodan
                },
                {
                    name: '标准双人房',
                    type: 'bar',
                    label: labelOption,
                    data: biaosuang
                },
                {
                    name: '豪华大床房',
                    type: 'bar',
                    label: labelOption,
                    data: haoda
                },
                {
                    name: '豪华双人房',
                    type: 'bar',
                    label: labelOption,
                    data: haosuang
                },
                {
                    name: '豪华总统套房',
                    type: 'bar',
                    label: labelOption,
                    data: haozong
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

</script>
</body>
</html>
